<template>
	<view
		:class="['iconfont', 'rate', clr, zClass]"
		:style="{'color':clr?'':clr}"
	>
		<text
			v-for="(n, i) in 5"
			:key="i"
			@click="clickEvent(i)"
		>
			<template v-if="i<value">&#xe6eb;</template>
			<template v-else>&#xe6ea;</template>
		</text>
	</view>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'value':{type:Number, default:0},
			'color':{type:String, default:'primary'}
		},
		computed:{
			clr(){return this.$zp.mapColorStr[this.color] || ''}
		},
		methods:{
			clickEvent(i){
				this.$emit('input', i+1)
			}
		}
	}
</script>

<style lang="scss">
	.rate{
		display: flex;
		font-size: $font-size-base*1.6;
	}
</style>
